<template>
	<view>
		<scroll-view scroll-y class="indexes indexes1" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<view class="menu-conent">
				<view class="cu-bar search bg-white searchs">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input @click="seachFriend" :adjust-position="false" type="text" placeholder="请输入ID号/手机号" confirm-type="search"></input>
					</view>
				</view>	
				<view class="menus" @tap="addFriend">
					<img src="../../static/img/xinpengyou.png" alt="">
					<view>新的朋友</view>
					<view class="xin">
						<text class="reds" v-show="num != 0">{{num}}</text>
						<view></view>
					</view>
				</view>
				<view class="menus" @tap="addGroups()">
					<img src="../../static/img/shoujitonngxunlu.png" alt="">
					<view>手机通讯录匹配</view>
					<view class="xin">
					</view>
				</view>
				<view class="menus" @tap="addGroup()">
					<img src="../../static/img/qunliao.png" alt="">
					<view>保存的群聊</view>
					<view class="xin">
					</view>
				</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.letter" :id="'indexes-' + item.letter" :data-index="item.letter">
					<view class="padding" v-if="item.data">{{item.letter}}</view>
					<view class="cu-list menu-avatar no-padding">
						<view class="cu-item" v-for="(items,sub) in item.data" :key="sub" @click="friendDetails(items.ids)">
							<image class="cu-avatar round lg" :src="items.avatar!=''?basl + items.avatar:'' || '../../static/image/bg_img.png'"></image>
							<view class="content">
								<view class="men-text">{{items.nickname}}</view>
								<!-- <view class="text-gray text-sm">
									{{items.sign}}
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.letter}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				showMask: '',
				listCurID: '',
				list: [],
				listCur: '',
				basl : this.$common.baseUrl,
				num:'',//新消息数量
				stus:''
			};
		},
		onLoad() {
			// let list = [{}];
			// for (let i = 0; i < 26; i++) {
			// 	list[i] = {};
			// 	list[i].data.nickname = String.fromCharCode(65 + i);
			// }
			// this.list = list;
			// this.listCur = list[0];
			// this.initData();
			// this.xinMess();
			
			this.vips();		
		},
		onShow(){
			this.xinMess();
			this.initData();
			this.$msgchat.initwork();
			var that=this;
			var innerAudioContext = uni.createInnerAudioContext();
			uni.onSocketMessage(function (res) {
				var jsonmsg = JSON.parse(res.data);
				if(jsonmsg.emit=='addfriend'){
					that.xinMess();
				}
				if(jsonmsg.emit=='agreefriend'){
					that.initData();
				}
				if((jsonmsg.emit=='chatMessage' || jsonmsg.emit=='addfriend') && uni.getStorageSync('yinstus') == 1){
					innerAudioContext.autoplay = true;
					innerAudioContext.src = 'static/image/yin.mp3';
					innerAudioContext.play();
				}
				if (jsonmsg.emit == 'chatMessage'){
					let msgListpa = 'msgList'+ jsonmsg.data.msg.userinfo.uid +'.text';
					// #ifdef APP-PLUS
					plus.io.resolveLocalFileSystemURL('/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/msgio/'+ msgListpa, function(entry){
						entry.file(function(file) {
							var fileReader = new plus.io.FileReader();
							fileReader.readAsText(file, 'utf-8');
							fileReader.onloadend = function(evt) {
								var list = JSON.parse(evt.target.result) //本地消息
								that.$msgchat.savafile(list, jsonmsg.data, jsonmsg.data.msg.userinfo.uid);
							}
						})
					}, function ( e ) {
						console.log( "Resolve file URL failed: " + e.message );
						that.$msgchat.savafile(null, jsonmsg.data, jsonmsg.data.msg.userinfo.uid);
					} );
					// #endif	
				}
			});
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		onBackPress() {
		   if(this.showMask) {  
		     this.showMask = false;  
		     return true;  
		   }else{  
		      uni.showModal({  
		        title: '提示',  
		        content: '是否退出应用?',  
		        success: function(res) {  
		            if (res.confirm) {  
		                // 退出当前应用，改方法只在App中生效  
		                plus.runtime.quit();  
						uni.closeSocket({
							success:(res)=>{
								console.log(res)
							}
						})
		            } else if (res.cancel) {  
		                console.log('用户点击取消');  
		            }  
		        }  
		      });  
		      return true  
		   }  
		},
		methods: {
			vips() {
				this.$common.requests('/api/user/is_vip').then(res => {
					if (res.data.code == 1) {
						this.stus = res.data.data.is_vip;
					}
				})
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].letter;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				// let y = e.touches[0].clientY,
				// 	offsettop = this.boxTop,
				// 	that = this;
				// //判断选择区域,只有在选择区才会生效
				// if (y > offsettop) {
				// 	let num = parseInt((y - offsettop) / 20);
				// 	this.listCur = that.list[num].letter
				// };
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].letter;
						that.movableY = i * 20
						return false
					}
				}
			},
			//好友列表
			initData(){
				uni.showLoading({
				    title: '加载中'
				});
				this.$common.requests('/api/Friend/friendlist').then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						// for(var i=0;i < res.data.data.length;i++ ){
						// 	if(res.data.data[i].data != ''){
						// 		for(var s=0;s < res.data.data[i].data.length;s++ ){
						// 			res.data.data[i].data[s].avatar =  this.$common.baseUrl + res.data.data[i].data[s].avatar
						// 		}
						// 	}
						// }
						this.list = res.data.data;
						this.listCur = this.list[0].letter
						uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
						    this.boxTop = res.top
						}).exec();
						uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
						    this.barTop = res.top
						}).exec()
					}
				})
			},
			//添加好友
			addFriend(){
				uni.navigateTo({
					url:"../addFriend/addFriend"
				})
			},
			//手机通讯录
			addGroups(){
				if(this.stus == 0){
					uni.showModal({
					    title: '',
					    content: '您还不是VIP，请先开通VIP',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					uni.navigateTo({
						url:"../selectContacts/selectContacts"
					})
				}
				
			},
			//群聊
			addGroup(){
				uni.navigateTo({
					url:"../addGroup/addGroup"
				})
			},
			friendDetails(ids){
				console.log(ids)
				uni.navigateTo({
					url:"../detailsData/detailsData?friend_id="+ids
				})
			},
			//新朋友消息数量
			xinMess(){
				this.$common.requests('/api/index/newfriendcount',{phone:this.phone}).then(res => {
					if(res.data.code == 1){
						this.num = res.data.data;
					}
				})
			},
			//查找好友
			seachFriend(){
				uni.navigateTo({
					url:'../addFriend/seachFriend/seachFriend'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background: $uni-color-bei;
	}
	.searchs{
		padding: 10upx 0 10upx 0;
		background: $uni-color-bei;
	}
	.round{
		border-radius: 14upx;
		background: #fff!important;
	}
	.indexes {
		position: relative;
	}
	.indexes1{
		height: 100vh!important;
	}
	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}
	.menu-conent{
		background: #fff;
	}
	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	.menus{
		width: 92%;
		margin: 0 auto;
		border-bottom: solid 2upx #EEEEEE;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.menus>img:nth-child(1){
		width: 90upx;
		height: 90upx;
		border-radius: 10upx;
	}
	.menus>view:nth-child(2){
		color: $uni-text-color;
		width: 60%;
	}
	.jiantou{
		width: 30upx;
		height: 30upx;
	}
	.xin{
		width: 20%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.reds{
		padding: 5upx 10upx;
		font-size: 20upx;border-radius: 50%;
		background: #DE0B0B;
		color: #FFFFFF;
		margin: 0 10upx;
	}
</style>
